<!--
 * @Descripttion:
 * @version: 1.0
 * @Author: Teemor
 * @Date: 2024-04-03 11:18:58
-->
<route lang="json5" type="home">
{
  needLogin: true,
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '设备编辑',
    disableScroll: false,
  },
}
</route>
<template>
  <view class="detail">
    <gc-formHeard title="设备编辑" tips="未安装" :status="5" />
    <view class="detailBox formBox">
      <uv-form labelPosition="left" v-model="status" ref="form" :labelStyle="labelStyle">
        <uv-form-item label="设备名称" prop="name" borderBottom>
          <uv-input v-model="status.name" border="none" />
        </uv-form-item>
        <uv-form-item label="安装地点" prop="type" borderBottom>
          <uv-input v-model="status.type" readonly border="none" />
        </uv-form-item>
      </uv-form>
      <map
        id="map"
        class="map"
        :show-location="true"
        :latitude="tude.latitude"
        :longitude="tude.longitude"
      ></map>
      <view class="bottomBox" :style="{ paddingBottom: safeAreaInsets.bottom + 20 + 'px' }">
        <uv-button
          type="primary"
          color="linear-gradient(-33deg, #226CFF, #329AFB);"
          shape="circle"
          text="安装设备"
        ></uv-button>
      </view>
    </view>
    <uv-picker ref="picker" :columns="columns" @confirm="confirm"></uv-picker>
  </view>
</template>

<script setup lang="ts" name="energyStorage">
const { safeAreaInsets, windowHeight } = uni.getSystemInfoSync()
onPageScroll(({ scrollTop }) => {})
const picker = ref()
const status = reactive({
  name: '',
  type: '',
})
const tude = ref({
  latitude: 0,
  longitude: 0,
})
const columns = [['中国', '美国', '日本']]
function confirm(e) {
  status.type = e.value[0]
}
const labelStyle = ref({ color: '#6E7D99', fontSize: '30rpx', width: '240rpx' })

onMounted(() => {
  uni.getLocation({
    type: 'wgs84',
    success: function (res) {
      console.log('当前位置信息：', res)
      status.type = res.latitude + ',' + res.longitude
      tude.value = res
    },
    complete: function (res) {
      console.log(res, 'res')
    },
  })
})
</script>

<style scoped lang="scss">
.detail {
  .map {
    width: 100%;
    height: calc(100vh - 300rpx);
  }

  .detailBox {
    position: relative;
    z-index: 2;
    min-height: 100px;
    padding: 0 30rpx 160rpx;
    margin-top: -15px;
    background: #fff;
    border-radius: 30rpx 30rpx 0rpx 0rpx;
  }

  .bottomBox {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
    padding: 40rpx;
    background: #fff;
  }
}
</style>
